<template>
  <UniPopup
    ref="selectRegistrationInfo"
    backgroundColor="#fff"
    :borderRadius="borderRadius"
    :z-index="999"
  >
    <view class="popup-content" :style="{ borderRadius }">
      <view class="h-48 disFlxCC fz-16 popup-title">
        <text>选择属于你的报名信息</text>
      </view>

      <scroll-view
        class="list-view py-12"
        scroll-y
        :enable-flex="true"
        scroll-with-animation
        scroll-anchoring
        :enhanced="true"
        :show-scrollbar="false"
      >
        <view>
          <template v-for="v in dataList" :key="v.id">
            <view
              class="list-item pa-12 mx-12 mb-12 fz-14 disFlxJS br-8"
              :class="{ 'list-item--active': selectedItem?.id === v.id }"
              @click="handleItemClick(v)"
            >
              <view class="mr-12">
                <view class="fz-18 mb-8">
                  <text>{{ v.personName }}</text>
                </view>
                <view class="disFlxAC">
                  <text class="flex-1 ov-1">{{ v.companyName }}</text>
                  <text class="ml-12 position">{{ v.companyPosition }}</text>
                </view>
              </view>
              <view>
                <text v-if="selectedItem?.id === v.id" style="color: #fff" class="ali-icon fz-20">
                  &#xe693;
                </text>
                <text v-else class="ali-icon fz-20">&#xe690;</text>
              </view>
            </view>
          </template>
          <Empty v-if="dataList.length === 0" text="暂无数据" />
        </view>
      </scroll-view>
      <view class="popup-bottom pt-12 px-24" :class="{ 'pb-12': !isNewIphone() }">
        <TButton
          text="确认签到"
          :disabled="!selectedItem"
          type="primary"
          class="gutter-btn"
          custom-class="h-44 linh-44 br-22 px-16"
          @click="handleSubmit"
        />
      </view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { isNewIphone } from '@/utils/is';
  import { getCurrentInstance, reactive, ref, unref } from 'vue';
  import { searchRegisterList } from '@/api/activity';
  import type { ISearchRegisterListData, ISearchRegisterListResult } from '@/api/activity/types';
  import Empty from '@/components/Empty/Empty.vue';

  export interface ISelectRegistrationInfoRef {
    show: (data: ISearchRegisterListData) => void;
  }

  const emits = defineEmits<{
    (e: 'submit', data: ISearchRegisterListResult): void;
  }>();

  const _this = getCurrentInstance();
  const openPopup = (direction: string = 'bottom') => {
    (_this?.refs['selectRegistrationInfo'] as any).open(direction);
  };

  const closePopup = (direction: string = 'bottom') => {
    (_this?.refs['selectRegistrationInfo'] as any).close(direction);
  };

  const borderRadius = ref('32rpx 32rpx 0px 0px');

  const parame = reactive<ISearchRegisterListData>({
    activityId: 0,
    personName: '',
    companyName: '',
  });

  const dataList = ref<ISearchRegisterListResult[]>([]);

  function getList() {
    searchRegisterList(unref(parame)).then((res) => {
      dataList.value = res;
    });
  }

  const selectedItem = ref<ISearchRegisterListResult>();
  function handleItemClick(item: ISearchRegisterListResult) {
    selectedItem.value = item;
  }

  function handleSubmit() {
    emits('submit', selectedItem.value!);
    selectedItem.value = void 0;
    closePopup();
  }

  defineExpose<ISelectRegistrationInfoRef>({
    show: (data: ISearchRegisterListData) => {
      parame.activityId = data.activityId;
      parame.personName = data.personName;
      parame.companyName = data.companyName;
      selectedItem.value = void 0;
      getList();
      openPopup();
    },
  });
</script>

<style lang="scss" scoped>
  .popup-content {
    background-color: #f2f3f5;
    overflow: hidden;
    .popup-title {
      width: 100%;
      color: #292928;
      background-color: #fff;
    }
    .popup-bottom {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
    }
    .list-view {
      width: 100%;
      box-sizing: border-box;
      height: 800rpx;
      .list-item {
        color: #333;
        background-color: #fff;
        transition: all 0.3s;
        .position {
          color: #969799;
          transition: all 0.3s;
        }
      }
      .list-item--active {
        color: #fff;
        background-color: #2878ff;
        .position {
          color: #fff;
        }
      }
    }
  }
</style>
